<template>
  <div class="login-container">

    <h2>智能运检管控平台</h2>
    <el-form class="box"
             ref="user"
             :model="user"
             :rules="rules"
    >
      <el-form-item prop="username">
        <el-input
          prefix-icon="el-icon-user"
          style="font-size: 20px;"
          ref="username"
          v-model="user.username"
          placeholder="请输入用户名"
          name="username"
          type="text"
          tabindex="1"/>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          prefix-icon="el-icon-lock"
          style="font-size: 20px;"
          ref="password"
          :type="password"
          v-model="user.password"
          placeholder="请输入密码"
          name="password"
          tabindex="2"
          show-password
          @keyup.enter.native="handleLogin('user')"/>
      </el-form-item>
      <el-button class="loginbtn"
                 type="primary"
                 style="width: 100%; margin-bottom: 30px"
                 @click="handleLogin('user')">登录
      </el-button>
    </el-form>
  </div>
</template>

<script>

export default {
  name: 'Login',
  data () {
    return {
      user: {
        username: '', // 用户名字
        password: '' // 密码
      },
      // 校验
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }

        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 16, message: '密码的长度在6-16位之间', trigger: 'blur' }
        ]
      },
      password: 'password'
    }
  },
  methods: {
    async handleLogin (user) { // 登录完成校验
      // this.$refs[user].validate((valid) => {
      //   if (valid) {
      //     // alert('登录成功')
      //     this.$router.push('/home')
      //   } else {
      //     alert('登录失败')
      //     return false
      //   }
      // })
      if (this.user.username && this.user.password) {
        if (this.user.password === '123456') {
          let params = {
            username: this.user.username,
            systemName: 'defectCenter'
          }
          await this.$store.dispatch('getUserToken', params)
          if (localStorage.token) {
            this.$router.push('/home')
          } else {
            this.$message.error(this.$store.state.loginMessage)
          }
        } else {
          this.$message({
            message: '用户名或密码错误，请重新输入',
            type: 'error'
          })
        }
      } else {
        this.$message({
          message: '请输入用户名及密码',
          type: 'warning'
        })
      }
    }
    // keydown (e) {
    // if (e.keyCode === 32) {
    // e.returnValue = false
    // }
    // alert('登录')
    // this.$refs[user].validate((valid) => {
    //   if (valid) {
    //     // alert('登录成功')
    //     console.log(valid)
    //     // this.$router.push('/home')
    //   } else {
    //     console.log('登录失败')
    //     return false
    //   }
    // })
    // }
  }
}

</script>

<style lang="less" scoped>

.login-container {
  background: url("../../assets/login.jpg") no-repeat center center fixed;
  background-size: cover;
  background-position: center;
  height: 100%;
  width: 100%;
  position: fixed;

}

h2 {
  margin-top: 100px;
  margin-bottom: 20px;
  text-align: center;
  font-size: 50px;
  color: white;
}

.box {
  position: relative;
  width: 520px;
  max-width: 100%;
  padding: -100px 100px 0;
  margin: 0 auto;
  overflow: hidden;
}

form {
  text-align: left;
}

label {
  display: inline-block;
  width: 80px;
  margin-right: 10px;
  text-align: right;
}

input {
  width: 240px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  outline: none;
  margin-bottom: 10px;
}

button {
  width: 260px;
  height: 40px;
  background-color: #409EFF;
  color: #fff;
  border: none;
  border-radius: 4px;
  outline: none;
  cursor: pointer;
}

button:hover {
  background-color: #66B1FF;
}

.login {
  margin-left: 50px;
}

.loginbtn {
  background: #407ffe;
  height: 64px;
  line-height: 32px;
  font-size: 30px;
}

</style>
